<template>
  <el-container style="height: 100vh">
    <el-container>
      <el-aside width="220px" style="background-color: #ffffff; border-right: 1px solid #e5e7eb">
        <div style="text-align: center; font-size: 18px; color: #fb7299; margin: 16px 0; font-weight: bold">
          B站大数据分析平台
        </div>
        <el-menu
          :default-active="$route.name"
          @select="(name) => $router.push({ name })"
          active-text-color="#fb7299"
          background-color="#ffffff"
          class="el-menu-vertical-demo"
          text-color="#303133"
          @open="handleOpen"
          @close="handleClose"
          border-right="false"
        >
          <el-menu-item index="Home">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-sub-menu index="analysis">
            <template #title>
              <el-icon><PieChart /></el-icon>
              <span>数据分析</span>
            </template>
            <el-sub-menu index="User">
              <template #title>
                <el-icon><User /></el-icon>
                <span>UP主数据分析</span>
              </template>
              <el-menu-item index="Up">
                <el-icon><UserFilled /></el-icon>
                <span>热门UP主</span>
              </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="Video">
              <template #title>
                <el-icon><VideoCamera /></el-icon>
                <span>视频数据分析</span>
              </template>
              <el-menu-item index="AvgView">
                <el-icon><VideoCamera /></el-icon>
                <span>总体数据</span>
              </el-menu-item>
              <el-menu-item index="MonthlyView">
                <el-icon><TrendCharts /></el-icon>
                <span>月度数据分析</span>
              </el-menu-item>
              <el-menu-item index="WeeklyView">
                <el-icon><DataLine /></el-icon>
                <span>周度数据分析</span>
              </el-menu-item>
              <el-menu-item index="TimeAnalysis">
                <el-icon><DataAnalysis /></el-icon>
                <span>时长分析</span>
              </el-menu-item>
              <el-menu-item index="HotTag">
                <el-icon><CollectionTag /></el-icon>
                <span>Top100词条</span>
              </el-menu-item>
              <el-menu-item index="HotVideoRank">
                <el-icon><Histogram /></el-icon>
                <span>最热视频排行</span>
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main style="padding: 24px; background: #f5f7fa; overflow-y: auto">
        <el-config-provider :locale="zhCn">
          <router-view />
        </el-config-provider>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import {
  PieChart,
  HomeFilled,
  User,
  UserFilled,
  VideoCamera,
  Histogram,
  TrendCharts,
  CollectionTag,
  DataAnalysis,
  DataLine,
} from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
body,
#app {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  background-color: #f5f7fa;
}

.el-menu-vertical-demo {
  width: 100% !important;
  min-width: auto !important;
}

.el-breadcrumb__item,
.el-breadcrumb__inner {
  color: #606266 !important;
}

.el-menu-item.is-active {
  background-color: #fff0f3 !important;
}
</style>
